<template>
	<view>
		<div class="father">
					<!-- 顶部logo -->
					<div class="logo">
						
						<div >
							
						</div>
						
						
					</div>
					<!-- 轮播图部分 -->
					<div class="img">
					    <!-- 村情简介 -->
						<view class="page" style="display: block;">
							<cunqinjianjie></cunqinjianjie>
						</view>
						<view class="page" style="display: none;">
							<zhicezhidu></zhicezhidu>
						</view>
							
						
						<!-- <iframe src="../cunqinjianjie/cunqinjianjie.vue" width="" height=""></iframe> -->
						<!-- <iframe src="slideshow/zhizezhidu.html" width="" height="" style="display: none;"></iframe>
						<iframe src="slideshow/cunjishiwuliucheng.html" width="" height="" style="display: none;"></iframe>
						<iframe src="slideshow/sanwugongkai.html" width="" height="" style="display: none;"></iframe>
						<iframe src="slideshow/rongyufengcai.html" width="" height="" style="display: none;"></iframe>
						<iframe src="slideshow/jiandujiancha.html" width="" height="" style="display: none;"></iframe> -->
					</div>
					<!-- 导航栏部分 -->
					<div class="foot">
						<ul>
							<li v-for='(item,index) in navList' :key='index' @click='goNewPage(index)' ><a href="javascript:;">
						 	   <span :class="[index===currentIndex ? 'currt': '']"> </span>
							          <i></i>
							          <p>{{item.navName}}</p>
								</a></li>
								
						</ul>
						
						
					</div>
				</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[{
					navName:'村情简介'
				},{
					navName:'职责制度'
				},{
					navName:'事务流程'
				},{
					navName:'三务公开'
				},{
					navName:'荣誉风采'
				},{
					navName:'监督检查'
				}],
				currentIndex:0
			};
		},
		onLoad() {
		 this.flexible(window,document)
		},
		methods:{
			goNewPage(inde){
				this.currentIndex = inde
				// console.log(this.$el.querySelectorAll('.swiper-container'))
				 this.$el.querySelectorAll('.page').forEach((item,index)=>{
					if(index === this.currentIndex){
						item.style.display = "block"
					}else{
						item.style.display = "none"
					}
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
      @import '@/common/css/normalize.scss';
	  @import '@/common/css/public.scss';
      @import '@/common/css/important.scss';
</style>
